<template>
    <div class="manage-page">
        <div class="topbar">
            <div class="main-tab">
                <a :class="{'cur':tab==0}" @click="params.categoryId='';tab=0;params.status='';pushHistory()">发布<i>{{nums.linggan+nums.article+nums.discover}}</i></a>
                <a :class="{'cur':tab==1}" @click="params.categoryId='';tab=1;params.status=2;pushHistory()  ">草稿箱</a>
            </div>
            <div class="sub-tab-wrap">
                <div class="sub-tab" v-if="tab==0">
                    <a :class="{'cur':params.categoryId==''}" @click="chooseSubTab('')">全部<i>{{nums.linggan+nums.article+nums.discover}}</i></a>
                    <a :class="{'cur':params.categoryId==22}" @click="chooseSubTab(22)">游戏<i>{{ nums.linggan }}</i></a>
                    <a :class="{'cur':params.categoryId==1}" @click="chooseSubTab(1)">作品<i>{{ nums.discover }}</i></a>
                    <a :class="{'cur':params.categoryId==9}" @click="chooseSubTab(9)">文章<i>{{ nums.article }}</i></a>
                </div>
                <div class="sub-tab" v-else>
                    <a :class="{'cur':params.categoryId==''}" @click="chooseSubTab('')">全部</a>
                    <a :class="{'cur':params.categoryId==22}" @click="chooseSubTab(22)">游戏</a>
                    <a :class="{'cur':params.categoryId==1}" @click="chooseSubTab(1)">作品</a>
                    <a :class="{'cur':params.categoryId==9}" @click="chooseSubTab(9)">文章</a>
                </div>
            </div>
        </div>
        <div class="manage-data-box">
            <div class="total">
                <div class="num">
                    共发布 {{total}} 组
                </div>
                <div class="filter-bx">
                    <div class="seach-bx">
                        <form @submit.prevent="()=>{return false;}">
                            <input type="text" @keypress.enter="handleSearch" v-model="params.title" placeholder="请输入内容标题关键词"><i v-if="params.title" @click="params.title=''" class="clear-by-search"></i>
                        </form>
                    </div>
                    <!-- <div class="mk-cus-ddl">
                        <span class="cur">全部</span>
                        <div class="sub-dd-block">
                            <ul class="sub-ddls">
                                <li><a>全部</a></li>
                                <li><a>待审核</a></li>
                                <li><a>已通过</a></li>
                                <li><a>未通过</a></li>
                            </ul>
                        </div>
                    </div> -->
                    <DropDown class="mr20" :list="statusList" :showAll="true" :value.sync="params.status" :width="150" placeholder="全部" v-if="tab==0"/>
                </div>
            </div>
            <div class="list" v-if="list.length>0">
                <div class="list-item" :class="{'in-select':isBatch}" v-for="(item,idx) in list" :key="idx">
                    <a class="select-btn" :class="{'selected':item.selected}" @click="item.selected=!item.selected" v-if="isBatch"></a>
                    <div class="ldata">
                        <a class="img-box" v-if="params.categoryId!=50" @click.prevent="toInfo(item.topCategory.id, item.id,idx)">
                            <img loading="lazy" v-imgd="{id:item.id,w:280,uptime:item.updateTime?item.updateTime:item.createTime}" alt="">
                        </a>
                        <div class="img-box" v-else>
                            <img loading="lazy" :src="item.image" alt="">
                        </div>
                        <div class="basic">
                            <a class="tit" @click.prevent="toInfo(item.topCategory.id, item.id,idx)">{{item.title}}</a>
                            <div class="cate">{{infoUrlEnum[item.topCategory.id].name}}-{{item.categoryName}}{{item.style?'/'+item.style:''}} <span class="time">{{item.createTime.split(' ')[0]}}</span></div>
                            <div class="statistics-num">
                                <span class="v-num">{{item.seeStr}}</span>
                                <span class="fv-num">{{item.collectNumStr}}</span>
                                <span class="z-num">{{item.praiseStr}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="r-action">
                        <router-link :to="pageEnum[item.categoryTopId]+'/'+item.id" class="edit">编辑</router-link>
                        <a class="share" @click="handleShare(item)">分享</a>
                        <a class="remove" @click="id=item.id;showDelConfirm=true;">删除</a>
                    </div>
                </div>
            </div>
            <div class="empty-data-tip" v-if="list.length==0&&!isloading">
                <div class="abs-con">
                    <span class="tip">您的发布列表为空，请您先发布</span>
                    <router-link to="/publish/publishGame" class="go-publish">去发布</router-link>
                </div>
            </div>
        </div>
        <div class="pro-page-layout" v-if="list.length>0">
            <el-pagination
                background @current-change="pageChange"
                :current-page="currentPage" :page-size="params.pageSize"
                layout="prev,pager,next" 
                :total="total">
            </el-pagination>
            <!-- <span class="page-prev" @click="handlePagePrev"></span>
            <span class="page-tip">第 {{queryParams.pageNum}} 页，共 {{totalPage}} 页</span>
            <span class="page-next" @click="handlePageNext"></span> -->
        </div>

        <div v-if="showClassify">
            <div class="fav-component">
                <div class="fav-header">
                    分类设置<a class="close-win" @click="handleClose"></a>
                </div>
                <div class="folder-con" style="margin-top:30px;">
                    <div class="tit">分类转移至</div>
                    <DropDown class="mr20" :list="cateList" :showAll="true" :width="150" placeholder="选择分类" style="margin-top:10px;width:100%;"/>
                </div>
                <div class="btns flex-end">
                    <a class="pro-default-btn" @click="handleClose">取消</a>
                    <a class="pro-confirm-btn">确认</a>
                </div>
            </div>
            <div class="modal-mask" @click="handleClose">

            </div>
        </div>

        <a-modal v-model="showDelConfirm" destroyOnClose centered :footer="null" :closable="false" width="366px">
            <div class="fav-component" >
                <div class="fav-header">
                    系统提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                    确定删除吗？删除后当前内容都会被删除且不可恢复。
                </div>
                <div class="btns m-widbtns">
                    <a class="pro-default-btn" @click="handleConfirmDel">确认</a>
                    <a class="pro-confirm-btn" @click="showDelConfirm=false">取消</a>
                </div>
            </div>
        </a-modal>

        <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body  :visible.sync="showInfo" direction="btt">
            <!-- 游戏详情 -->
            <gameInfo @close="onInfoClose" v-if="pageType=='game'" :id="currentId"/>
            <!-- 作品详情 -->
            <workInfo @close="onInfoClose" v-else-if="pageType=='work'" :id="currentId"  @prev="onPrev" @next="onNext"/>
            <!-- 文章详情 -->
            <articleInfo @close="onInfoClose" v-else-if="pageType=='article'" :id="currentId"/>
        </el-drawer>
    </div>
</template>
<script>
import gameInfo from '@/components/gameInfo'
import articleInfo from '@/components/articleinfo'
import workInfo from '@/components/workinfo'
import qs from 'qs'
import DropDown from '@/components/dropdown'
import api from '@/api/api'
export default {
    components:{DropDown,gameInfo,articleInfo,workInfo},
    data(){
        return {
            nums:{
                article: 0,//文章分类
                articleAll: 0,//总文章数
                discover:0,//发现分类
                draft:0,//文章草稿数
                explorerArticleCount:0,//图片集文件夹
                explorerImagesCount: 0,//图片文件夹数
                explorerTotalCount:0,//文件夹总数
                fansCount: 0,//粉丝
                linggan: 0,//灵感分类
                material: 0,//材质分类
                praisedCount: 0,//点赞数
                subscribeCount:0,//关注
                publishTotalCount: 0,
                sortVideoCount: 0,
                collectCount: 0
            },
            infoUrlEnum: {
                22: { url: '/game/', name: '游戏' },
                1: { url: '/work/', name: '作品' },
                50: { url: '/video/', name: '短视频' },
                9: { url: '/article/', name: '文章' }
            },
            pageType:'',
            currentId:'',
            curFullPath:'',
            showInfo:false,
            isloading:true,
            oldStatus:'',
            isBatch:false,
            pageEnum:{
                22:'/publish/publishGame',
                1:'/publish/publishWork',
                50:'/publish/publishVideo',
                null:'/publish/publishVideo',
                9:'/publish/publishArticle'
            },
            id:'',
            showDelConfirm:false,
            showClassify:false,
            cateList:[{value:'',title:'游戏'},{value:'',title:'作品'},{value:'',title:'作品'}],
            statusList:[{value:'',title:'全部'},{value:'3',title:'待审核'},{value:'0',title:'已通过'},{value:'4',title:'未通过'}],
            isInEdit:false,
            currentPage:1,
            total:0,
            tab:0,
            subTab:0,
            urlByTab:{

            },
            params:{
                pageNum:1,
                pageSize:10,
                orderByColumn:'createTime',
                isAsc:'desc',
                title:'',
                categoryId:'',
                status:''
            },
            categoryEnum:{
                0:'',
                1:'9',
                2:'9',
                3:'22',
                4:'9',
                5:'9'
            },
            list:[],
            shareEnum:{
                22:'/game/',
                1:'/work/',
                9:'/article/'
            }
        }
    },
    watch:{
        'params.status':function(newVal){
            this.params.pageNum=1;
            this.list==[];
            this.queryList();
        }
    },
    computed:{
        selectedLen(){
            let datas=this.list.filter(r=>{
                return r.selected;
            })
            return datas.length;
        }
    },
    methods:{
        toInfo(cateId, id,idx) {
            // this.currentIdx=idx;
            // if(cateId==22){
            //     this.pageType='game'
            // }else if(cateId==1){
            //     this.pageType='work'
            // }else if(cateId==9){
            //     this.pageType='article'
            // }
            // document.body.style.overflow='hidden';
            // this.currentId=id;
            // this.curFullPath=this.$route.fullPath;
            // window.history.pushState({}, 0,  this.infoUrlEnum[cateId].url + id);
            // this.showInfo=true

            this.$router.push({ path: this.infoUrlEnum[cateId].url + id })
            let routeData = this.$router.resolve({ path: this.infoUrlEnum[cateId].url + id })
            window.open(routeData.href, '_blank');
        },
        onInfoClose(){
            window.history.pushState({}, 0,this.curFullPath);
            document.body.style.overflow='inherit';
            this.showInfo=false;
        },
        handleShare(item){
            let that=this;
            this.$copyText(location.host+this.shareEnum[item.categoryTopId]+item.id).then(() => {
                that.$amessage.success('分享链接已拷贝,快去分享~');
            }, () => {
                that.$amessage.error('复制失败！');
            });
        },
        chooseMainTab(_tab){
            this.tab=_tab;  
            if(_tab==0){
                this.params.status='2';    
            }else{
                this.oldStatus=this.params.status;
            }
        },
        selectAll(_isSelected){
            this.list.map(item=>{
                item.selected=_isSelected;
            })
        },
        handleInBatch(){
            this.list.map(item=>{
                item.selected=true;
            })
            this.isBatch=true;
        },
        async handleConfirmDel(){
            let res=await api.delArticle({id:this.id});
            if(res.code==0){
                this.$amessage.success('删除成功')
                this.params.pageNum=1;
                this.showDelConfirm=false;
                this.queryList();
            }
        },
        handleShowClassify(){
            document.body.style.overflow='hidden';
            this.showClassify=true;
        },
        handleClose(){
            document.body.style.overflow='inherit';
            this.showClassify=false;
        },
        handleSearch(e) {
            if(e)e.target.blur();
            this.params.pageNum=1;
            this.queryList();
        },
        pageChange(page){
            this.params.pageNum=page;
            this.queryList();
        },
        version(time) {
            let date = new Date(time)
            return date.getTime()
        },
        pushHistory(){
            let urlParams={t:this.tab,s:this.params.categoryId};
            window.history.pushState({}, 0, '/publish/publishManage/?'+ qs.stringify(urlParams))
        },
        chooseSubTab(_cate){
            this.hasMore=true;
            this.scrollLoaded=false;
            this.list=[];
            this.params.categoryId=_cate;
            this.pushHistory();
            this.params.pageNum=1;
            this.queryList();
        },
        handlePagePrev(){

        },
        handlePageNext(){

        },
        async queryList(){
            let res={};
            this.isloading=true;
            if(this.params.categoryId!=50){
                 res=await api.articleMemberList(this.params);
            }else{
                 let data=JSON.parse(JSON.stringify(this.params));
                 delete data.categoryId;
                 res=await api.shortVideoList(data);
            }
            res.data.map(item=>{
                item.selected=false;
            })
            this.isloading=false;
            this.total=res.total;
            this.list=res.data;
        }
    },
    async mounted(){
        let routeQuery=this.$route.query;
        if(routeQuery.t){
            this.tab=routeQuery.t;
            if(routeQuery.t==1){
                this.params.status=2;
            }
        }
        
        if(routeQuery.s){
            this.params.categoryId=routeQuery.s;
        }
        let res = await api.getMemberArticleAndExplorerStatistics(localStorage.getItem('userId'));
        this.nums = res.data;
        this.queryList();

        this.$nextTick(() => {
            if($('.t-adv').length>0){
                $('#app').addClass('b-has-adv');
            }
        })
    }
}
</script>
<style lang="less">
.manage-page{
    .pro-page-layout{
        text-align: center;
        margin-top:20px;
        // .el-pagination{
        //     .btn-next,.btn-prev{
        //         width:34px;height:34px;
        //         line-height: 34px;
        //         background:#181818;
        //         color:#969696;
        //             border-radius:8px;
        //     }
        //     .el-pager{
        //         li{
        //             width:34px;height:34px;
        //             line-height: 34px;
        //             background:#181818;
        //             color:#969696;
        //             border-radius:8px;
        //             font-size:12px;
        //             margin:0px 6px;
        //             &.active,&:not(.disabled).active{
        //                 background:#181818;
        //                 color:#fff;
        //             }
        //             &:hover,&:not(.disabled):hover{
        //                 color:#fff;
        //             }
        //         }
        //     }
        // }
    }
    .topbar{
        border-radius:16px;
        height:135px;
        background:#181818;
        user-select: none;
        padding:30px;
        .main-tab{
            color:#969696;
            font-size:16px;
            font-weight:500;
            margin-left:8px;
            a{
                
                i{
                    font-style: normal;
                    margin-left:5px;
                }
                &:first-child{
                    margin-right:30px;
                }
                &.cur{
                    color:#fff;
                    border-bottom:2px solid #11CCB1;
                }
            }
        }
        .sub-tab-wrap{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .r-funs{
                font-size:14px;
                a{
                    transition:.1s all linear;
                    &:active{
                        opacity:.9;
                    }
                }
                .tip{
                    i{
                        font-style: normal;
                        color: #11CCB1;
                        margin:0px 4px;
                    }
                }
                .cancel-select-all{
                    background:#29272F;
                    line-height:40px;
                    border-radius:10px;
                    width:110px;
                    text-align: center;
                    color:#fff;
                    margin-left:10px;
                    display: inline-block;
                    font-weight:500;
                }
                .select-all{
                    background:#11CCB1;
                    line-height:40px;
                    border-radius:10px;
                    width:110px;
                    text-align: center;
                    color:#fff;
                    margin-left:10px;
                    display: inline-block;
                    font-weight:500;
                }
                .cate-to{
                    background:#11CCB1;
                    line-height:40px;
                    border-radius:10px;
                    width:110px;
                    text-align: center;
                    color:#fff;
                    margin-left:10px;
                    display: inline-block;
                    font-weight:500;
                }
                .complete{
                    background:#11CCB1;
                    line-height:40px;
                    border-radius:10px;
                    width:110px;
                    text-align: center;
                    color:#fff;
                    margin-left:10px;
                    display: inline-block;
                    font-weight:500;
                }
                .batch-cate-mgr{
                    line-height:40px;
                    background:#242327;
                    border-radius:8px;
                    text-align: center;
                    width:113px;
                    display: inline-block;
                    font-size:14px;
                }
            }
        }
        .sub-tab{
            margin-top:30px;
            font-size:14px;
            color:#969696;
            display:flex;
            grid-gap:30px;
            a{
                line-height:28px;
                display:flex;
                align-items: center;
                // margin-right:30px;
                padding:0px 9px;
                i{
                    font-style: normal;
                    margin-left:5px;
                }
                &.cur{
                    background:#242327;
                    border-radius:28px;
                    color:#fff;
                }
                &:hover{
                    background:#242327;
                    padding:0px 9px;
                    border-radius:28px;
                    color:#fff;
                }
            }
        }
    }
    .manage-data-box{
        background:#181818;
        border-radius:16px;
        min-height:680px;
        margin-top:20px;
        padding:23px 29px;
        .empty-data-tip{
            background:url('../../assets/pro/publish_mgr_emptydata.svg') no-repeat;
            background-position:center center;
            background-size:280px 227px;
            height:347px;
            text-align: center;
            position: relative;
            // top:154px;
            .abs-con{
                position: absolute;
                bottom:-70px;
                left:0px;
                right:0px;
                .tip{
                    font-size: 14px;
                    color:#fff;
                }
                .go-publish{
                    width:147px;
                    line-height:48px;
                    border-radius:10px;
                    color:#fff;
                    background:#11CCB1;
                    text-align: center;
                    display: block;
                    margin:37px auto 0px auto;
                    font-size:16px;
                    user-select: none;
                    transition:.1s all linear;
                    &:hover {
                        background: #0fab94;
                    }
                }
            }
        }

        .total{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom:18px;
            .num{
                font-size:14px;
                color:#969696;
            }
            .filter-bx{
                display: flex;
                align-items: center;
                .seach-bx{
                    width:250px;
                    margin-right:15px;
                    form{
                        display: flex;
                        background:#29272F;
                        align-items: center;
                        border-radius:8px;
                    }
                    input{
                        background:#29272F;
                        height:40px;
                        line-height:40px;
                        border-radius:8px;
                        border:none;
                        padding-left:36px;
                        color:#fff;
                        font-size:14px;
                        background-image:url('../../assets/pro/header/search_icon.svg');
                        background-repeat:no-repeat;
                        background-position:14px center;
                        background-size:16px 16px;
                        width:100%;
                    }
                    

                    .clear-by-search {
                        min-width: 14px;
                        height: 14px;
                        background: url('../../assets/pro/cancel_search.svg') no-repeat;
                        background-size: cover;
                        margin-right:10px;
                        cursor: pointer;
                    }
                }
            }
        }

        .list{
            .list-item{
                display: flex;
                margin-bottom:29px;
                justify-content: space-between;
                align-items: center;
                &:hover{
                    .ldata{
                        .basic{
                            .tit{
                                color:#11CCB1;
                            }
                        }
                        .img-box{
                            img{
                                transform: scale(1.08);
                            }
                        }
                    }
                }
                &.in-select{
                    position: relative;
                    padding-left:40px;
                }
                .select-btn{
                    width:20px;height:20px;
                    background:url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
                    background-size:cover;
                    position: absolute;
                    left:0px;
                    &.selected{
                        background:url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
                        background-size:cover;
                    }
                }
                .ldata{
                    display: flex;
                    align-items: center;
                    .img-box{
                        width:140px;height:105px;min-width:140px;
                        border-radius:16px;
                        margin-right:20px;
                        overflow: hidden;
                        img{
                            width:100%;
                            height:100%;
                            object-fit:cover;
                        }
                    }
                    .basic{
                        .tit{
                            font-size:18px;
                            font-weight:500;
                            line-height:25px;
                        }
                        .cate{
                            margin:6px 0px 33px 0px;
                            font-size:14px;
                            line-height:20px;
                            color:#969696;
                            .time{
                                margin-left:26px;
                            }
                        }
                        .statistics-num{
                            font-size:14px;
                            color:#969696;
                            span{
                                padding-left:26px;
                                margin-right:19px;
                            }
                            .v-num{
                                background:url('../../assets/pro/yuedu_icon.svg') no-repeat;
                            }
                            .fv-num{
                                background:url('../../assets/pro/shoucangicon.svg') no-repeat;
                            }
                            .z-num{
                                background:url('../../assets/pro/dianzanicon.svg') no-repeat;
                            }
                        }
                    }
                }
                .r-action{
                    a{
                        width:88px;
                        display: inline-block;
                        padding-left:24px;
                        font-size:14px;
                        color:#fff;
                        &:hover{
                            color:#11CCB1;
                        }
                    }
                    .edit{
                        background-image:url('../../assets/pro/mgr_item_edit.svg');
                        background-repeat: no-repeat;
                        background-position:left center;
                    }
                    .share{
                        background-image:url('../../assets/pro/mgr_item_share.svg');
                        background-position:left center;
                        background-repeat: no-repeat;
                    }
                    .remove{
                        background-image:url('../../assets/pro/mgr_item_del.svg');
                        background-position:left center;
                        background-repeat: no-repeat;
                    }
                }
            }
        }
    }
}











































































































































































































</style>